<template>
  <section class="datetime">
    <el-date-picker
      v-model="value"
      :editable="false"
      value-format="timestamp"
      type="datetime"
      :format="format"
      :clearable="clearable"
      :disabled="disabled"
      :placeholder="placeholder"
      :picker-options="pickeroptions"
      @change="handleChange"
    ></el-date-picker>
  </section>
</template>
<script>
import mixins from '../mixins'
export default {
  name: 'VDateTime',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {
        rangeOpen: false,
        rangeBefore: null,
        rangeAfter: null,
      }
    }
  },
  computed: {
    format () {
      return this.option.format || 'yyyy-MM-dd HH:mm:ss'
    },
    rangeOpen () {
      return this.option.rangeOpen
    },
    rangeBefore () {
      return this.option.rangeBefore
    },
    rangeAfter () {
      return this.option.rangeAfter
    },
    pickeroptions () {
      return {
        selectableRange: (() => {
          if (this.rangeOpen) {
            const s = new Date(this.rangeBefore)
            const e = new Date(this.rangeAfter)
            const before = {
              hour: s.getHours(),
              minute: s.getMinutes(),
              second: s.getSeconds()
            }
            const after = {
              hour: e.getHours(),
              minute: e.getMinutes(),
              second: e.getSeconds()
            }
            return [`${before.hour}:${before.minute}:${before.second} - ${after.hour}:${after.minute}:${after.second}`]
          } else {
            return ['00:00:00 - 23:59:59']
          }

        })(),
        disabledDate: (time) => {
          if (this.rangeOpen) {
            return time.getTime() < new Date(this.rangeBefore).getTime() || time.getTime() > new Date(this.rangeAfter).getTime()
          } else {
            return false
          }
        }
      }
    }
  },
  data () {
    return {
      value: ''
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      let t = this.option.value || new Date()
      this.value = this.formatDate(t).getTime()
    },

    getValue () {
      return this.value;
    },

    setValue (v) {
      this.value = this.formatDate(v).getTime()
    },

    setCheck () {
      let { value, required } = this
      let error = false, errorMsg = ''
      if (value !== undefined && value !== null) {
        value = value + ''
      }
      if (required && !value) {
        error = true
        errorMsg = '必填选项不能为空'
      }
      this.error_ = error
      this.error_message_ = errorMsg
      this.fieldCheck()
    },

    formatDate (a) {
      if (!(a instanceof Date)) {
        if (!a) {
          return new Date()
        } else {
          return new Date(a)
        }
      }
      return a
    },

    handleChange (e) {
      this.setCheck()
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.datetime {
  /deep/ {
    .el-date-editor {
      width: 100%;
    }
  }
}
</style>